Almost all modern enterprises use software tools for defining their internal and external processes. Such processes may for example relate to the various steps necessary for the assembly of a car but also to other tasks of an enterprise such as monitoring sales. To be able to define, monitor and evaluate a certain process or even the performance of the overall enterprise, a type of software referred to as Business Process Management (BPM) Tool is commonly used. One example of such a BPM Tool is the software ARIS available from applicant.
However, before implementing and using such a process it has to be defined. In order to simplify its definition, the various steps of a process to be developed are typically displayed in graphical form, e.g., using a flow diagram as illustrated in the screenshot of FIG. 1. Such flow diagrams can be created in various ways, e.g. manually or by drawing on a computer using a professional drawing program. However, such an approach is rather complex and inflexible. A more convenient option of creating such a flow diagram is using a web browser, e.g, by building a corresponding HTML file.
There are several ways to employ a web browser for creating flow diagrams which are briefly outlined in the following:
A first option is to use a third party plug-in such as Adobe Flash. However, such a plug-in typically requires a lot of computing power and may not be available on all platforms.
Another option is using bitmap based graphics, wherein a bitmap represents a symbol based on web graphic formats like PNG or JPEG. Such a technology is used in products like Signavio or BPMN Community. However, bitmap based formats cannot be scaled without losing quality. This is illustrated in FIG. 2: Symbols 200 and 210 are bitmap graphic based symbols which are displayed at original size. Symbols 220 and 230 show the same symbols, however scaled by a factor of 2. As can be seen, the scaling results in visible artifacts and thus in reduced quality.
Another approach is known as 9 slice scaling graphics. This technology is for example used by IBM Blueworks Live. The idea behind this approach is to split each graphic or symbol into 9 slices, i.e., different graphics so that the various region of the overall graphic can be independently scaled. As shown in FIG. 3, the regions 1, 3, 7 and 9 will never be scaled regardless of whether the graphic 300 will be stretched horizontally or vertically. If the graphic 300 is horizontally scaled, only the regions 2 and 8 will be stretched. If the graphic 300 is vertically scaled, the regions 4 and 6 will be stretched. The region 5 will always be stretched. This approach has the benefit that graphics that have a plain solid colored region in the center can be scaled without losing quality. However, this approach does not work with arbitrary shapes.
Another well-known approach is using vector based graphics, wherein a graphic is formatted in a web browser supported format like SVG or VML. This is another technology used by the BPM Tools of Signavio. Vector based graphics can be indefinitely scaled without degrading quality. However, vector formats like SVG and VML need a high amount of memory and a lot of processing power to render large and complex SVG and VML structures.
A further option is to draw a symbol in the web browser by using the HTML5 Canvas API (Application Programming Interface). This technology is for example used by Lucidchart or WebSphere Business Compass. As illustrated in FIG. 4, the HTML5 Canvas API allows to draw any kind of symbol 420 onto a canvas 410 in the web browser. Most common web browsers today already support a GPU (Graphics Processor Unit) acceleration for the HTML5 Canvas API but the performance to calculate the symbol geometry and to draw a symbol is still unsatisfactory.
A more recent approach is to use HTML5 and CSS3 (Cascading Style Sheets), which is also a technology used by IBM Blueworks Live. Following this approach, a symbol is represented by various nested HTML elements which are styled with CSSs. This technique can be combined with any of the other approaches described above, in particular the 9 slice scaling graphics. Most common web browsers support a GPU accelerated CSS rendering leading to an acceptable performance of representing a symbol as a HTML fragment styled with CSS compared to the other solutions. However, it is rather difficult for human persons to create a complex symbol based on a HTML fragment and to style it with CSS. In addition, some common web browsers fail to support the complete CSS standard so that different CSS notations are necessary to obtain the same or similar results.
It is therefore the technical problem underlying the present invention to provide a solution that reduces the necessary effort for programming such graphics, in particular in view of the different web browsers, and to make such code more reliable and stable.